<template>
	<!-- 首页搜索 -->
	<view>
		<u-navbar :title="navTitle" bgColor="#84C0F4" leftIconColor="#FFFFFF" titleStyle="color:#FFFFFF" @leftClick="navBack()"></u-navbar>
		<view class="navH"></view>
		<view class="top3">
			<u-search
				placeholder="请输入关键字搜索"
				v-model="keyword"
				:show-action="true"
				action-text="搜索"
				actionStyle=""
				@search="jobSearch()"
				@custom="jobSearch()"
			></u-search>
		</view>
		<view v-if="startSearch == true">
			<view class="t4">
				<veiw class="t5">历史搜索</veiw>
				<veiw class="t6">
					<view class="t7">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/15.png"></image>
					</view>
					<view class="fs-26">删除</view>
				</veiw>
			</view>
			<view class="t8">
				<view class="t9">测试</view>
				<view class="t9">产品经理</view>
			</view>
		</view>
		<!-- 搜索结果 -->
		<view v-if="startSearch == false">
			<view class="t10">
				<view class="t11">
					<text
						class="mar-right-20"
						:style="{ fontWeight: searchType === 'job' ? 'bold' : 'normal' }"
						@click="searchType = 'job'"
					>
						职位
					</text>
					<text :style="{ fontWeight: searchType === 'company' ? 'bold' : 'normal' }" @click="searchType = 'company'">公司</text>
				</view>
			</view>
			<!-- 筛选栏 -->
			<view class="filter-bar">
				<view class="t12">
					<view class="t13" v-for="item in curList" :key="item.id" @click="operate(item.id)">
						<view class="t14" :class="{ selBColor: item.id === curFilter }"></view>
						<view class="t15" :class="{ selFColor: item.id === curFilter }">{{ item.name }}</view>
					</view>
				</view>
				<!-- 行业 -->
				<view class="insdury-filter" :style="{ height: curFilter == 400 ? '800rpx' : '0' }">
					<view class="insdury-content">
						<view v-for="iItem in industryList" :key="iItem.id">
							<view class="insdury-title fs-34">{{ iItem.industryName }}</view>
							<view class="options-list">
								<view class="options fs-28" v-for="(oItem, index) in iItem.child">{{ oItem }}</view>
							</view>
						</view>
					</view>
					<view class="opera-btn" :style="{ display: curFilter == 400 ? 'flex' : 'none' }">
						<button plain="true" @click="curFilter = 100">取消</button>
						<button>确定</button>
					</view>
				</view>
			</view>

			<view class="t17">
				<view class="t15">
					<view class="t16">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/19.png"></image>
					</view>
					<view class="t18">
						<view class="t19">
							<view class="t20">
								<view class="t21">高级UI设计</view>
								<view class="t22">急聘</view>
							</view>
							<view class="t23">6-9K</view>
						</view>

						<view class="t24">
							<view class="t25">广州 白云区</view>
							<view class="t25">刚刚活跃</view>
							<view class="t25">3-5年</view>
							<view class="t25">本科</view>
						</view>

						<view class="t26">腾讯科技-UI设计</view>

						<view class="t27">
							<view class="t28">林女士-CEO</view>
							<view class="t29">广东海珠</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 綜合筛选 -->
			<u-popup :show="sortShow" :round="10" mode="bottom" @close="sortShow = false">
				<view class="t30">
					<view class="t31">
						<view class="t33">排序</view>
						<view class="t32" @click="sortShow = false">
							<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/20.png"></image>
						</view>
					</view>
					<view class="t34">
						<view class="t35">综合排序</view>
						<view class="t36">最新优先</view>
						<view class="t37">
							<view class="t38">距离优先</view>
							<view class="t39">
								<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/2.png"></image>
								<text>瑞福大夏</text>
							</view>
						</view>
						<view class="t40">匹配度优先</view>
					</view>
				</view>
			</u-popup>
			<!-- 地区 -->
			<region v-model="areaShow" class="selectPoup"></region>
			<!-- 筛选 -->
			<screen v-model="screenShow" class="selectPoup"></screen>
		</view>
	</view>
</template>

<script>
import Region from './components/region.vue'
import Screen from './components/screen.vue'
export default {
	components: {
		Region,
		Screen
	},
	data() {
		return {
			navTitle: '搜索', // 导航栏标题
			keyword: '',
			startSearch: true,
			areaShow: false, // 地区
			screenShow: false, // 筛选
			sortShow: false, // 综合筛选
			searchType: 'job', // 当前搜索类型 job：职位，company：公司
			curFilter: 100, // 当前点击的筛选，默认为地区
			filterList: [
				{ id: 100, name: '广州', type: 'job/company' },
				{ id: 200, name: '综合筛选', type: 'job/company' },
				{ id: 300, name: '筛选', type: 'job' },
				{ id: 400, name: '行业', type: 'job/company' },
				{ id: 500, name: '职类', type: 'job' }
			],
			industryList: [
				{
					id: 1000,
					industryName: '互联网/IT/电子/通信',
					child: [
						'电子商务',
						'媒体',
						'游戏',
						'数据服务',
						'广告营销',
						'生活眼务',
						'医疗健康',
						'旅游',
						'o2o',
						'音乐/视频/阅读',
						'分类信息',
						'社交网络',
						'在线教育',
						'企业服务',
						'人力资源服务',
						'新零售',
						'信息安全',
						'移动互联网',
						'智能硬件',
						'计算机软件',
						'互联网',
						'计算机服务',
						'计算机硬件',
						'运营商/增值服务',
						'通信/网络设备',
						'消费电子',
						'电子/半导体/集成电路'
					]
				}
			]
		}
	},
	computed: {
		curList() {
			return this.filterList.filter(item => item.type.includes(this.searchType))
		}
	},
	watch: {
		// 监听修改标题
		areaShow(newVal, oldVal) {
			if (newVal && !oldVal) {
				this.navTitle = '广州'
			} else if (!newVal && oldVal) {
				this.navTitle = '搜索'
			}
		},
		screenShow(newVal, oldVal) {
			if (newVal && !oldVal) {
				this.navTitle = '筛选'
			} else if (!newVal && oldVal) {
				this.navTitle = '搜索'
			}
		}
	},
	methods: {
		navBack() {
			// 左上角回退箭头在侧边栏开启时不回退而是侧边栏
			if (this.areaShow) {
				this.areaShow = false
			} else if (this.screenShow) {
				this.screenShow = false
			} else this.$mRouter.back(1)
		},
		jobSearch() {
			this.startSearch = false
		},
		operate(id) {
			this.curFilter = id
			switch (id) {
				case 100:
					this.areaShow = true
					break
				case 200:
					this.sortShow = true
					break
				case 300:
					this.screenShow = true
					break
				case 400:
					break
				case 500:
					break
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.navH {
	height: calc(96rpx + var(--status-bar-height));
	background-color: #84c0f4;
}
.selectPoup ::v-deep.u-transition {
	width: 100%;
	margin-top: calc(96rpx + var(--status-bar-height));
}
.top3 {
	width: 90%;
	margin: 0 auto;
	margin-top: 32upx;
}
.t4 {
	display: flex;
	width: 90%;
	margin: 0 auto;
	justify-content: space-between;
	margin-top: 38upx;
	.t5 {
		font-size: 30upx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}
	.t6 {
		display: flex;
		font-size: 26upx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		align-items: center;
	}
	.t7 {
		margin-right: 12upx;
		image {
			width: 24upx;
			height: 27upx;
		}
	}
}
.t8 {
	display: flex;
	width: 90%;
	margin: 0 auto;
	margin-top: 28upx;
	.t9 {
		width: 206upx;
		height: 66upx;
		background: #f6f8f7;
		opacity: 1;
		font-size: 28upx;
		font-family: Source Han Sans CN-Normal, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		text-align: center;
		line-height: 66upx;
		margin-right: 20upx;
	}
}
.t10 {
	border-bottom: 2upx solid #eeeeee;
	margin-top: 36upx;
	.t11 {
		width: 90%;
		margin: 0 auto;
		font-size: 32upx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		padding-bottom: 26upx;
	}
}
.filter-bar {
	position: relative;
	// height: 82rpx;

	.t12 {
		display: flex;
		padding: 24rpx 0 26rpx 30rpx;

		.t13 {
			display: flex;
			align-items: flex-end;
			margin-right: 30upx;
			.t15 {
				font-size: 24upx;
				font-family: Source Han Sans CN-Normal, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			.t15.selFColor {
				color: #1d7dd1;
			}
			.t14 {
				display: inline-block;
				width: 0;
				height: 0;
				border-bottom: 10rpx solid #c8c9cb;
				border-right: 10rpx solid transparent;
				margin-right: 14rpx;
			}
			.t14.selBColor {
				border-bottom: 10rpx solid #1d7dd1;
			}
		}
	}

	.insdury-filter {
		height: 800rpx;

		position: absolute;
		background-color: #ffffff;
		top: 82rpx;
		left: 0;
		right: 0;
		transition: height 0.3s ease;
		margin: 0 32rpx;
		border-bottom: 2rpx solid #eeeeee;

		.insdury-content {
			height: calc(100% - 120rpx);
			overflow-y: scroll;

			.insdury-title {
				color: #333333;
				padding: 28rpx 0;
			}

			.options-list {
				margin-bottom: 28rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				.options {
					color: #333333;
					padding: 16rpx 20rpx;
					background-color: #f6f6f6;
					border-radius: 8rpx;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
				}
			}
		}

		.opera-btn {
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			& > button {
				width: 328rpx;
				height: 70rpx;
				font-size: 30rpx;
				line-height: 70rpx;
				border-radius: 8rpx;

				&:first-child {
					border: 2rpx solid #84c0f4;
					color: #84c0f4;
					background-color: #ffffff;
					margin-right: 8rpx;
				}

				&:last-child {
					background-color: #84c0f4;
					color: #ffffff;
					border: none;
				}
			}
		}
	}
}

.t17 {
	margin-top: 26upx;
	.t15 {
		display: flex;
		width: 90%;
		margin: 0 auto;
		border-bottom: 2upx solid #eeeeee;
		padding-bottom: 40upx;
		margin-bottom: 34upx;
		.t16 {
			image {
				width: 120upx;
				height: 120upx;
			}
		}
		.t18 {
			width: 100%;
			margin-left: 32upx;
			.t19 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				.t20 {
					display: flex;
					.t21 {
						font-size: 34upx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #333333;
					}
					.t22 {
						width: 80upx;
						height: 44upx;
						opacity: 1;
						border: 2upx solid #ffa39e;
						text-align: center;
						line-height: 44upx;
						background: #fff1f0;
						font-size: 24upx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #ff4d4f;
						margin-left: 28upx;
					}
				}
				.t23 {
					font-size: 30upx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 700;
					color: #4cbfed;
				}
			}
			.t24 {
				display: flex;
				margin-top: 22upx;
				.t25 {
					height: 40upx;
					background: #f5f6f8;
					opacity: 1;
					font-size: 22upx;
					font-family: Source Han Sans CN-Normal, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					text-align: center;
					line-height: 40upx;
					padding: 0 12upx;
					margin-right: 8upx;
				}
			}
			.t26 {
				font-size: 26upx;
				font-family: Source Han Sans CN-Normal, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-top: 28upx;
			}
			.t27 {
				display: flex;
				justify-content: space-between;
				margin-top: 30upx;
				.t28 {
					font-size: 22upx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
				.t29 {
					font-size: 24upx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
}
.t30 {
	height: 546upx;
	width: 90%;
	margin: 0 auto;
	padding-top: 38upx;
	.t31 {
		display: flex;
		justify-content: space-between;

		.t33 {
			font-size: 34upx;
			font-family: Source Han Sans SC-Medium, Source Han Sans SC;
			font-weight: 500;
			color: #333333;
		}
		.t32 {
			image {
				width: 36upx;
				height: 36upx;
			}
		}
	}
}
.t34 {
	margin-top: 78upx;
	.t35 {
		font-size: 30upx;
		font-family: Source Han Sans SC-Medium, Source Han Sans SC;
		font-weight: 500;
		color: #71b9f8;
	}
	.t36 {
		margin-top: 54upx;
		font-size: 30upx;
		font-family: Source Han Sans SC-Medium, Source Han Sans SC;
		font-weight: 500;
		color: #333333;
	}
	.t37 {
		display: flex;
		justify-content: space-between;
		margin-top: 60upx;
		.t38 {
			font-size: 30upx;
			font-family: Source Han Sans SC-Medium, Source Han Sans SC;
			font-weight: 500;
			color: #333333;
		}
		.t39 {
			display: flex;
			align-items: center;
			image {
				width: 24upx;
				height: 28upx;
			}
			text {
				margin-left: 8upx;
				font-size: 26upx;
				font-family: Source Han Sans SC-Medium, Source Han Sans SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}
}
.t40 {
	font-size: 30upx;
	font-family: Source Han Sans SC-Medium, Source Han Sans SC;
	font-weight: 500;
	color: #333333;
	margin-top: 54upx;
}
</style>
